<template>
	<view class="wrap-publish-popup flex align-center just-center" v-if="isShow" @click.stop="onDismiss">
		<view class="wrap-popup-content flex column align-center">
			<view class="white-bg flex column align-center just-center" @click.stop="$event.stopPropagation()">
				<view class="title f-26">请选择发布类型</view>

				<view class="list">
					<block v-for="(item, index) in list" :key="index">
						<view class="item flex align-center just-between" @click="onTab(item)">
							<image class="icon" :src="$staticImagePath(item.icon)" />

							<view class="name f-30">{{ item.title }}</view>

							<image class="arrow" :src="$staticImagePath('publish/publish_arrow.png')" />
						</view>
					</block>
				</view>
			</view>

			<image class="close" :src="$staticImagePath('publish/publish_close.png')" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 是否显示
			 */
			isShow: {
				type: Boolean,
				default: false,
			},
		},
		watch: {
			isShow: {
				handler() {
					if (this.isShow === true) {
						this.getData();
					}
				},
				immediate: true,
			},
		},
		data() {
			return {
				list: [],
			};
		},
		methods: {
			/**
			 * 关闭
			 */
			onDismiss() {
				this.$emit("update:isShow", false);
			},
			/**
			 * 点击
			 */
			onTab(item) {
				this.onDismiss();
				this.$jump.to(item.url);
			},

			/**
			 * 获取用户信息
			 */
			getData() {
				this.$commonNetwork.getUserIdenInfoData((res) => {
					var list = [];
					// if (res.code === 0) {
					// 	//普通用户
					// 	list.push({
					// 		title: "便民信息/头条",
					// 		icon: "publish/publish_message.png",
					// 		url: `/pages/publish/publishType?index=${0}`,
					// 	});
					// } else if (res.code === 1) {
						//商家用户
						list.push({
							title: "广告/电子宣传单",
							icon: "publish/publish_sjgg.png",
							// url: `/pages/publish/publish?status=${2}&article_category_id=0`,
							url: "/pages/publish/publishAdv"
						});
						list.push({
							title: "便民信息/头条",
							icon: "publish/publish_message.png",
							url: `/pages/publish/publishType?index=${0}`,
						});
					// }
					//是否是官方认证
					if (res.auth === 1) {
						list.push({
							title: "政务公告",
							icon: "publish/publish_zwgg.png",
							url: `/pages/publish/publishType?index=${1}`,
						});
					}
					this.list = list;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-publish-popup {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.5);

		.wrap-popup-content {
			.white-bg {
				width: 560rpx;
				padding: 60rpx 40rpx;
				box-sizing: border-box;
				background-color: white;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202, 202, 202, 0.6);
				border-radius: 20rpx;
				gap: 36rpx;

				.title {
					color: #121212;
				}

				.list {
					width: 100%;
					overflow: hidden;

					.item {
						width: 100%;
						height: 112rpx;
						padding: 0 40rpx;
						box-sizing: border-box;
						background-color: #f6f6f6;
						border-radius: 30rpx;
						margin-bottom: 40rpx;
						overflow: hidden;

						&:last-child {
							margin-bottom: 0rpx;
						}

						.icon {
							width: 60rpx;
							height: 60rpx;
						}

						.name {
							margin-left: 28rpx;
							flex: 1;
							margin-right: 20rpx;
							color: #252525;
						}

						.arrow {
							width: 12rpx;
							height: 20rpx;
						}
					}
				}
			}
			.close {
				width: 52rpx;
				height: 120rpx;
			}
		}
	}
</style>
